<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>EAPtoHTML</title>
    <script type="text/javascript" language="javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(document).ready(function() {
        $('#example').dataTable( {
          "bProcessing": true,
          "bAutoWidth": false,
          "sAjaxSource": 'data/json_data.txt',
          "aoColumnDefs": [
            { mData: 0,
            mRender: function ( data, type, row ) {
            return '<a class="thumb" href="data/'+data.replace('{','').replace('}','')+'.png" target="_blank">View</a>';
            }, "aTargets": [ 0 ] }
            ,{ "bSortable": false, "aTargets" : [0,5] }
            ,{ "bSearchable": true, "bVisible": false, "aTargets": [ 5 ] }
            ,{ "sClass": "center", "aTargets": [ 0,1,4 ] }
          ]
        } );
      } );
    </script>
    <style type="text/css">
      @import "css/demo_page.css";
      @import "css/demo_table.css";
      .thumb:hover {
      outline: 3px solid grey;
      }
      .thumb {
      border: 3px solid transparent;
      }
    </style>
  </head>
  <body id="dt_example">
    <div id="container">
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
          <tr>
            <th title="LINK - Click this link to view the diagram">LINK</th>
            <th title="MODEL - This is the 'Model' in EA. Generally this will be the major business area or project.">MODEL</th>
            <th title="PATH - This is the folder path within EA for the object. Frequently identifies grouping or document types.">PATH</th>
            <th title="NAME - Name of the Diagram Object in EA.">NAME</th>
            <th title="OBJECTS - This is the number of other objects within the Diagram. More generally means a more complicated Diagram.">OBJECTS</th>
            <th title="KEYWORDS - This column is hidden but contains keywords extracted from the Diagram for searchability.">KEYWORDS</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
          <tr>
            <th title="LINK - Click this link to view the diagram">LINK</th>
            <th title="MODEL - This is the 'Model' in EA. Generally this will be the major business area or project.">MODEL</th>
            <th title="PATH - This is the folder path within EA for the object. Frequently identifies grouping or document types.">PATH</th>
            <th title="NAME - Name of the Diagram Object in EA.">NAME</th>
            <th title="OBJECTS - This is the number of other objects within the Diagram. More generally means a more complicated Diagram.">OBJECTS</th>
            <th title="KEYWORDS - This column is hidden but contains keywords extracted from the Diagram for searchability.">KEYWORDS</th>
          </tr>
        </tfoot>
      </table>
    </div>

  </body>
</html>